<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示v-for</title>
    <!--导入vue的js库-->
    <script src="./js/vue@3.5.12.global.js"></script>
</head>
<body>
<!--视图：view-->
    <div id="app">
        <table width="100%" border="1">
           <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
           </tr>
            <tr v-for="stu in students" :key="stu.id">
                <td>{{stu.id}}</td>
                <td>{{stu.name}}</td>
                <td>{{stu.gender}}</td>
                <td>{{stu.age}}</td>
            </tr>
        </table>
        <hr>
        <hr>
        <table width="100%" border="1">
            <tr>
                <th>序号</th>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            <tr  v-for="(stu,index) in students" :key="index" >
                <td>{{index+1}}</td>
                <td>{{stu.id}}</td>
                <td>{{stu.name}}</td>
                <td>{{stu.gender}}</td>
                <td>{{stu.age}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    //创建Vue的实例
    const app = Vue.createApp({
        data(){
            return {
                //声明一个学生数组，有三个学生对象，采用的是json数组
                students:[
                    {id:1001,name:'jack',gender: '男',age:22},
                    {id:1002,name:'rose',gender: '女',age:20},
                    {id:1003,name:'jerry',gender: '男',age:18}
                ]
            }
        }
    })
    //挂载
    app.mount('#app')
</script>
</html>